<template>
    <div class='container'>
        <div class="table">
            <t-base-table bordered hover stripe size="small" headerAffixedTop row-key="index" :data="data"
                :columns="columns" tableLayout="auto">
                <!-- 操作列插槽 -->
                <template #action="{ row }">
                    <t-button size="small" theme="primary" @click="handleEdit(row)">编辑</t-button>
                    <t-button size="small" theme="default" variant="outline" @click="handleDelete(row)">删除</t-button>
                </template>
            </t-base-table>
        </div>
        <t-alert type="success" message="BaseTable 操作成功" />
    </div>
</template>
<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import { getBookListAPI } from '@/api/book'


const columns = ref([])
const data = ref([])
onMounted(async () => {
    const res = await getBookListAPI()
    // console.log("获取书籍列表", res)
    columns.value = res.columns
    data.value = res.data
})
// 编辑逻辑（示例）
const handleEdit = (row: any) => {

    console.log('编辑', row);
    // 实现编辑逻辑，比如打开编辑弹窗
};

// 删除逻辑（示例）
const handleDelete = (row: any) => {
    console.log('删除', row);
    // 实现删除逻辑，比如调用接口删除并更新表格数据
};
</script>
<style lang='scss' scoped></style>